<template>
  <div>
    <Card>
      <p slot="title">
        <!-- <Icon type="ios-film-outline"></Icon> -->
        幻灯片管理
      </p>
      <a href="#" slot="extra" @click.prevent="toAddPage">
        <Icon type="ios-loop-strong"></Icon>
        添加幻灯片
      </a>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="proLiatColumns"
        @on-delete="handleDelete"
      />
      <!--      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>-->
    </Card>
  </div>
</template>

<script>
  import Tables from '_c/tables';
  import {getTableData} from '@/api/data';
  import {getSlideList, deleteSlide} from "@/api/slide";

  export default {
    name: "slide_list_page",
    components: {
      Tables
    },
    data() {
      return {
        proLiatColumns: [

          {
            title: "缩略图",
            key: "img",
            sortable: true,
            render: (h, params) => {
              return h("div", [
                h("img", {
                  attrs: {
                    src: params.row.img
                  },
                  style: {
                    maxWidth: '200px',
                    maxHeight: '100px'
                  }
                }),

              ]);
            }
          },

          {
            title: "项目链接",
            key: "externalLinks",
            sortable: true
          },
          {
            title: "创建日期",
            key: "create_time",
            sortable: true
          },
          {
            title: "操作",
            key: "handle",
            options: ["delete"],
            button: [
              (h, params, vm) => {
                return h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "你确定要删除吗?"
                    },
                    on: {
                      "on-ok": () => {
                        // vm.$emit("on-delete", params);
                        console.log('删除测试')

                      }
                    }
                  },
                  // [h("Button", "自定义删除")]1·
                );
              }
            ]
          }
        ],
        columns: [
          {title: "Name", key: "name", sortable: true},
          {title: "Email", key: "email", editable: true},
          {title: "Create-Time", key: "createTime"},
          {
            title: "Handle",
            key: "handle",
            options: ["delete"],
            button: [
              (h, params, vm) => {
                return h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "你确定要删除吗?"
                    },
                    on: {
                      "on-ok": () => {
                        // vm.$emit("on-delete", params);
                        console.log('删除测试')
                        deleteSlide(params.row.id).then(res => {

                          if (res.data.msg === 0 || res.data.msg === '0') {
                            vm.$emit(
                              "input",
                              params.tableData.filter(
                                (item, index) => index !== params.row.initRowIndex
                              )
                            );
                          }
                        });

                      }
                    }
                  },
                  [h("Button", "自定义删除")]
                );
              }
            ]
          }
        ],
        tableData: []
      };
    },
    methods: {
      handleDelete(params) {
        console.log('cs',params);
        deleteSlide(params.row.id).then(res => {

          if (res.data.msg === 0 || res.data.msg === '0') {
            // vm.$emit(
            //   "input",
            //   params.tableData.filter(
            //     (item, index) => index !== params.row.initRowIndex
            //   )
            // );
          }
        });
      },
      exportExcel() {
        this.$refs.tables.exportCsv({
          filename: `table-${new Date().valueOf()}.csv`
        });
      },
      /**
       * 跳转到添加页面
       */
      toAddPage() {
        const route = {
          name: "slideAdd",
          meta: {
            title: `动态路由`
          }
        };
        this.$router.push(route);
      }
    },
    mounted() {
      // getTableData().then(res => {
      //   this.tableData = res.data;
      // });
      getSlideList({}).then(res => {
        console.log(res);
        this.tableData = res.data.list;
      });
    }
  };
</script>

<style>
</style>
